<template>
    <header class="">
        <div class="w bar">
            <h1>
                <a href="javascript:void(0);">25</a>
            </h1>
            <ul>
                <li>
                    <a href="javascript:void(0);">我的</a>
                </li>
                <li>
                    <a href="javascript:void(0);">天气</a>
                </li>
                <li>
                    <a href="javascript:void(0);">段子</a>
                </li>
            </ul>
        </div>
    </header>
</template>

<script>
    export default {
        name: "tabBar",
        data() {
            return {}
        },
        methods: {},
        created() {

        }
    }
</script>

<style scoped lang="less">
    header{
        width: 100%;
        position: fixed;
        top: 0;
        right: 0;
        z-index: 999;
        background-color: rgba(0,0,0,.2);
        .bar{
            height: 60px;
            float: right;
            h1{
                display: inline-block;
                float: left;
               a{
                   color: #fff;
                   line-height: 60px;
                   font-size: 24px;
               }
            }
            ul{
                float: right;
                li{
                    float: left;
                    margin-right: 30px;
                    a{
                        font-size: 14px;
                        color: #fff;
                        line-height: 60px;
                        &:hover{
                            color: #ff9000;
                        }
                    }
                }
            }
        }
    }
</style>
